<template>
	<view class="cart-container" :style="{ paddingBottom: isEmpty ? '60px' : '' }">
		<view class="cartlist" v-if="isEmpty">
			<uni-swipe-action>
				<block v-for="(goods, index) in cartList" :key="index">
					<uni-swipe-action-item :right-options="options" @click="swipeItemClickHandler($event, goods)">
						<my-goods showRadio showNum :goods="goods" @change-radio="radioChangeHandler"
							@num-change="numChangeHandler"></my-goods>
					</uni-swipe-action-item>
				</block>
			</uni-swipe-action>
			<!-- <my-settle></my-settle> -->
			<view class="settle-box">
				<my-settle></my-settle>
			</view>
		</view>
		<view class="empty-cart" v-else>
			<image src="/static/cart_empty@2x.png" class="empty-img"></image>
			<text class="tip-text">空空如也~</text>
		</view>
		<view class="production-recommend">
			<view class="title">为你推荐</view>
			<view class="production-list">
				<view class="production-item" v-for="item in hotGoods" :key="item.goodsId">
					<navigator :url="`/subcontract/goods_detail/goods_detail?goodsId=${item.goodsId}`">
						<view class="production-image">
							<image :src="$imageUrl + item.goodsImg"></image>
						</view>
						<view class="production-desc">
							{{ item.goodsName }}
						</view>
						<view class="production-price">
							￥<span>{{ item.goodsPrice }}</span>
						</view>
					</navigator>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapState
	} from 'vuex'
	import badgeMix from '@/mixins/tabbar-badge.js'
	export default {
		mixins: [badgeMix],
		data() {
			return {
				options: [{
						text: '批量删除',
						style: {
							backgroundColor: '#80808c'
						}
					},
					{
						text: '删除',
						style: {
							backgroundColor: '#eb545b'
						}
					},
				],
				hotGoods: []
			}
		},
		computed: {
			...mapState('module_cart', ['cartList']),
			isEmpty() {
				return this.cartList === [] || this.cartList.length > 0
			}
		},
		onLoad() {
			this.especialGoods()
		},
		methods: {
			...mapMutations('module_cart', ['updateGoodsState', 'updateGoodsCount', 'removeGoodsById']),
			radioChangeHandler(val) {
				console.log(val);
				this.updateGoodsState(val)
			},
			numChangeHandler(val) {
				console.log(val);
				this.updateGoodsCount(val)
			},
			swipeItemClickHandler(e, goods) {
				let {
					content
				} = e;
				if (content.text === '删除') {
					uni.showModal({
						title: '提示',
						content: '是否删除',
						success: res => {
							if (res.confirm) {
								this.removeGoodsById(goods)
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}
			},
			async especialGoods() {
				const { data: res } = await uni.$http.get('/goods?promotional=1')
				this.hotGoods = res.data
			}
		}
	}
</script>

<style lang="scss">
	// .cart-container {
	// 	padding-bottom: 60px;
	// }
	.settle-box {
		height: 60px;
		position: fixed;
		// bottom: 0px;
		bottom: 50px;
		left: 0;
		width: 100%;
		z-index: 999;
		background-color: #fff;
		box-sizing: border-box;
	}
	.cartlist {
		margin-bottom: 20px;
	}

	.empty-cart {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 50px 0;

		.empty-img {
			width: 90px;
			height: 90px;
		}

		.tip-text {
			font-size: 12px;
			color: gray;
			margin-top: 15px;
		}
	}

	.production-recommend {
		 padding-bottom: 60px;
		.title {
			color: #fff;
			line-height: 20px;
			font-size: 18px;
			text-align: center;
			margin-bottom: 20px;
			text-shadow: 0 0 10px #52e3fc, 0 0 20px aqua;
		}
		.production-list {
			width: 100%;
			display: flex;
			flex-wrap: wrap;

			.production-item {
				width: 50%;
				padding: 20rpx;
				box-sizing: border-box;
				background-color: #fff;
				border: 1rpx #eee solid;
				border-bottom: none;
				border-right: none;

				.production-image {
					width: 100%;
					height: 300rpx;

					image {
						width: 100%;
						height: 300rpx;
						display: block;
					}
				}

				.production-desc {
					font-size: 14px;
					margin-top: 20rpx;
					overflow: hidden; //多出的隐藏
					//text-overflow: ellipsis;//多出部分用...代替
					display: -webkit-box; //定义为盒子模型显示
					-webkit-line-clamp: 2; //用来限制在一个块元素显示的文本的行数
					-webkit-box-orient: vertical; //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
				}

				.production-price {
					margin-top: 16rpx;
					font-size: 14px;
					font-weight: bold;

					span {
						font-size: 18px;
					}
				}
			}
		}
	}
</style>
